<template>
  <div>
    <div
      class="cropper"
      :style="{ width: `${imgObj.width}px`, height: `${imgObj.height}px` }"
    >
      <vueCropper
        ref="cropper"
        :img="cropperItem.fileShowPath"
        :outputSize="option.outputSize"
        :outputType="option.outputType"
        :canScale="option.canScale"
        :autoCrop="option.autoCrop"
        :autoCropWidth="option.autoCropWidth"
        :autoCropHeight="option.autoCropHeight"
        :canMoveBox="option.canMoveBox"
        :canMove="option.canMove"
        :centerBox="option.centerBox"
        :info="option.info"
        :fixedBox="option.fixedBox"
        :full="option.full"
      ></vueCropper>
    </div>
    <div class="sure-box">
      <el-button class="sure-btn" type="primary" @click="handleClick"
        >确定</el-button
      >
    </div>
  </div>
</template>
<script>
import { VueCropper } from "vue-cropper";
import { getToken } from "@/utils/auth";
import { UpladFileCropper } from "../../../../static/js/upload.js";
export default {
  name: "Cropper",
  components: { VueCropper },
  props: ["annexMsg", "cropperItem", "uploadFileUrl"],
  watch: {},
  data() {
    return {
      option: {
        img: this.cropperItem.fileShowPath, // 裁剪图片地址
        outputSize: 1, // 裁剪生成图片质量
        outputType: "jepg", // 裁剪生成图片格式
        canScale: true, // 图片是否允许滚轮播放
        autoCrop: true, // 是否默认生成截图框 false
        info: false, // 是否展示截图框信息
        autoCropWidth: 200, // 生成截图框的宽度
        autoCropHeight: 200, // 生成截图框的高度
        canMoveBox: true, // 截图框是否可以拖动
        fixedBox: false, // 固定截图框的大小
        canMove: false, // 上传图片是否可拖动
        centerBox: true, // 截图框限制在图片里面
        full: true, // 输出原图比例的截图
        high:true
      },
      resImg: null, //截图后图片
      previewImg: null, // 预览后的图片
      previewObj: {
        width: 200,
        height: 200,
      },
      imgObj: {
        width: 600,
        height: 600,
      },
    };
  },
  created() {},

  methods: {
    handleClick() {
      this.$refs.cropper.getCropData((data) => {
        // this.resImg = data;
        let fileName = this.annexMsg;
        let token = getToken();
        UpladFileCropper(
          this.uploadFileUrl,
          data,
          fileName,
          token,
          this.callBack
        );
      });
    },
    callBack(iRestStr) {
      let data = iRestStr ? JSON.parse(iRestStr) : null;
      if (data && data.code === 200) {
        this.$emit("updataItem", data.data);
      }
    },
  },
  mounted() {},
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
};
</script>
<style lang="scss" scoped>
.sure-box {
  text-align: right;
}
.sure-btn {
  margin: 10px 0;
}
</style>
